<template>
  <div>
    <a-card :title="t('模板管理')">
      <a-form :label-col="{ span: 1 }" label-align="left">
        <a-form-item :label="t('搜索')">
          <a-input-search
            placeholder="请输入模板名称"
            v-model:value="query.templateName"
            allow-clear
            @keydown.enter="search"
            class="w-fit"
            @search="search"
          ></a-input-search>
        </a-form-item>
        <a-form-item :label="t('数据范围')">
          <Scope @change="search" v-model="query.scope" />
        </a-form-item>
        <a-form-item :label="t('价签尺寸')">
          <EslResolutions @change="search" v-model="query.resolutionId" />
        </a-form-item>
      </a-form>
      <div class="flex justify-between">
        <div class="flex gap-4">
          <a-button type="primary" @click="create">{{ t('新建') }}</a-button>
          <a-button @click="list" :loading="table.loading">{{ t('刷新') }}</a-button>
        </div>
        <div class="flex gap-4">
          <a-popconfirm
            :title="t('是否执行操作')"
            @confirm="remove()"
            :disabled="table.keys.length === 0"
            placement="bottom"
          >
            <a-button shape="circle" danger type="link" :disabled="table.keys.length === 0">
              {{ t('批量删除') }}
            </a-button>
          </a-popconfirm>

          <TableFilter
            :raw="columns"
            v-model:columns="columnsRef"
            :module-name="table.moduleName"
          />
        </div>
      </div>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { columns, columnsRef } from '../data/columns';
import { create, list, remove, search } from '../data/curd';
import { table, query } from '../data/data';
const { t } = useI18n();
</script>

<style lang="scss" scoped></style>
